<!--
 * @Author: your name
 * @Date: 2021-03-18 21:21:43
 * @LastEditTime: 2021-03-18 22:32:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /chenyu-sys/src/pages/PublicNumber/index.vue
-->
<template>
  <div class="gzh">
    <!-- 头部区域 -->
    <div class="header">
      <div class="title">微信互粉墙</div>
      <div class="center">
        <div style="line-height:50px">
          <span><el-button type="success" @click="helpHandler()">如何上墙？</el-button></span>
        </div>
        <el-button type="success" @click="addWxCodeHandler()">&nbsp;&nbsp;点我上墙&nbsp;&nbsp;</el-button>
      </div>
      <div class="erweima">
        <img src="@/assets/wxCode.jpg" alt="" />
      </div>
    </div>
    <div><p style="color: red">敬告：二维码列表是根据您的互粉率进行排序，如果您长时间不互粉，您的二维码排名可能会很低，新人会自动置顶！</p></div>
    <div><el-input v-model="searchParams.code" placeholder="我的暗号"></el-input>
      <el-button type="success" @click="getAllImgList()">查看全部</el-button>
      <el-button type="success" @click="getNotFanImgListByMyCode()">只看未粉</el-button>
      <el-button type="success" @click="getIFanImgListByMyCode()">我粉了谁</el-button>
      <el-button type="success" @click="getFanMeImgListByMyCode()">谁粉了我</el-button>
    </div>
    <!-- vip指定区域 -->
<!--    <div class="vip">-->
<!--      <div class="vip_first">-->
<!--        <div class="vip_text">vip置顶区</div>-->
<!--        <div>加我微信</div>-->
<!--        <div><img class="vip_first_img" src="@/assets/logo.png" alt="" /></div>-->
<!--      </div>-->
<!--      <div v-for="item in arr" :key="item" class="vip_first">-->
<!--        <div><img class="img" src="@/assets/logo.png" alt="" /></div>-->
<!--        <div class="dflex">-->
<!--          <span style="min-width:80px">他的暗号:</span>-->
<!--          <el-input size="mini" v-model="name"></el-input>-->
<!--        </div>-->
<!--        <div class="dflex">-->
<!--          <span style="min-width:80px">我的暗号:</span>-->
<!--          <el-input size="mini" v-model="name"></el-input>-->
<!--        </div>-->
<!--        <div class="dflex">-->
<!--          <div>增 &nbsp;<span style="color:red;">66</span></div>-->
<!--          <el-button style="float:right;" type="success">提交</el-button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <!-- 普通会员区 -->
    <div class="putong">
      <div v-for="item in wxCodeList" :key="item.id" class="vip_first">
        <div><img class="img" :src="item.myImg" alt="" /></div>
<!--        <div class="dflex">-->
<!--          <span style="min-width:80px">他的暗号:</span>-->
<!--          <el-input size="mini" v-model="hisCode"></el-input>-->
<!--        </div>-->
<!--        <div class="dflex">-->
<!--          <span style="min-width:80px">我的暗号:</span>-->
<!--          <el-input size="mini" v-model="myCode"></el-input>-->
<!--        </div>-->
        <div class="dflex">
<!--          &nbsp;&nbsp;&nbsp;增<span style="color:red;">{{item.fansCount}}</span>-->
          <div><el-button style="float:right;" type="info" >增:<span style="color:red;">{{item.fansCount}}</span></el-button></div>
          <div><el-button style="float:right;" type="success"  @click="fanHeHandler()">粉他</el-button></div>
        </div>
      </div>
    </div>
    <wxCode-add v-if="addWxCodeVisible" ref="wxCodeAdd" @refreshDataList="refreshDataList"></wxCode-add>
    <fan-he v-if="fanFormVisible" ref="fanHe" @refreshDataList="refreshDataList"></fan-he>
    <help v-if="fanFormVisible" ref="help" @refreshDataList="refreshDataList"></help>
  </div>
</template>

<script>
import wxCodeAdd from './wxCode-add'
import fanHe from './fan-he'
import help from './help'
export default {
  components: {
    wxCodeAdd,
    fanHe,
    help
  },
  data () {
    return {
      searchParams: {
        code: '',
        searchType: 0 // 0代表默认查看所有，1代表查看我粉的，2代表粉我的
      },
      addWxCodeVisible: false,
      fanFormVisible: false,
      helpVisible: false,
      wxCodeList: [],
      myCode: '',
      hisCode: ''
    }
  },
  computed: {},
  created () {
    this.refreshDataList()
  },
  methods: {
    refreshDataList () {
      switch (this.searchParams.searchType) {
        case 0:
          this.getAllImgList()
          break
        case 1:
          this.getNotFanImgListByMyCode()
          break
        case 2:
          this.getIFanImgListByMyCode()
          break
        case 3:
          this.getFanMeImgListByMyCode()
          break
      }
    },
    getAllImgList () {
      let that = this
      this.searchParams.searchType = 0
      that.wxCodeList = []
      let request = {
        params: {
          myCode: that.searchParams.code
        }
      }
      console.log('getAllImgList')
      that.$api.getAllImgList(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.wxCodeList = res.data.data
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getNotFanImgListByMyCode () {
      if (!this.searchParams.code) {
        alert('请在输入框填写正确的暗号')
        return
      }
      let that = this
      this.searchParams.searchType = 1
      that.wxCodeList = []
      let request = {
        params: {
          myCode: that.searchParams.code
        }
      }
      console.log('getNotFanImgListByMyCode')
      that.$api.getNotFanImgListByMyCode(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.wxCodeList = res.data.data
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        alert('请在输入框填写正确的暗号')
        console.log(error)
      })
    },
    getIFanImgListByMyCode () {
      this.searchParams.searchType = 2
      if (!this.searchParams.code) {
        alert('请在输入框填写正确的暗号')
        return
      }
      let that = this
      that.wxCodeList = []
      let request = {
        params: {
          myCode: that.searchParams.code
        }
      }
      console.log('getIFanImgListByMyCode')
      that.$api.getIFanImgListByMyCode(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.wxCodeList = res.data.data
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        alert('请在输入框填写正确的暗号')
        console.log(error)
      })
    },
    getFanMeImgListByMyCode () {
      this.searchParams.searchType = 3
      if (!this.searchParams.code) {
        alert('请在输入框填写正确的暗号')
        return
      }
      let that = this
      that.wxCodeList = []
      let request = {
        params: {
          myCode: that.searchParams.code
        }
      }
      console.log('getFanMeImgListByMyCode')
      that.$api.getFanMeImgListByMyCode(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.wxCodeList = res.data.data
        } else {
          console.log(res.data)
          alert('请在输入框填写正确的暗号')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 新增 / 修改
    addWxCodeHandler () {
      this.addWxCodeVisible = true
      this.$nextTick(() => {
        this.$refs.wxCodeAdd.init()
      })
    },
    fanHeHandler () {
      this.fanFormVisible = true
      this.$nextTick(() => {
        this.$refs.fanHe.init()
      })
    },
    helpHandler () {
      this.fanFormVisible = true
      this.$nextTick(() => {
        this.$refs.help.init()
      })
    }
  }
}
</script>

<style scoped>
.gzh {
  min-width: 1100px;
  padding: 10px 50px;
  box-sizing: border-box;
}
.header {
  display: flex;
  height: 100px;
}
.title {
  flex: 8;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
}
.center {
  flex: 2;
  /* text-align: center; */
}
.erweima {
  flex: 1;
  line-height: 100px;
}
.dflex {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.erweima img {
  width: 100px;
}
.vip_first_img {
  width: 100%;
  margin-top: 40px;
}
.img {
  width: 100%;
}
.vip {
  border: 2px solid #ccc;
  display: flex;
  overflow-y: auto;
  /* flex-wrap: nowrap; */
}
.vip_first {
  width: 20%;
  height: 20%;
  min-width: 180px;
  max-width: 180px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}
.vip_text {
  font-weight: 700;
}
.putong {
  /* border: 2px solid #ccc; */
  display: flex;
  /* overflow-y: auto; */
  flex-wrap: wrap;
  justify-content: center;
}
</style>
